import React from "react";
import ReactDom from "react-dom";
import './index.css'

const name = "jack"
const load = true

const loadData = () => {
  if (load) {
    return <div>loading...</div>
  }
  return <div>数据加载完成,数据</div>
}

const xun = [
  { name: "shuaige", id: 1 },
  { name: "uyiy", id: 2 },
  { name: "oo", id: 3 },
  { name: "uuuu", id: 4 },

]
const title = (
  // 当然也可以采用行内样式
  <h1 className="title">{loadData()}</h1>
)
const lie = (
  <ul>
    {xun.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
)
// 函数组件必须大写,必须有返回值
// const Hello=()=>{
//   return(
//     <div>这是我的一个函数组件</div>
//   )
// }

// 类组件:使用ES6的class创建的组件
// 类名称也必须以大写字母开头
// 类组件应该继承React.Component父类,从而可以使用父类中提供的
// 方法和属性
// 类组件必须提供render()方法
// render()方法必须有返回值,表示该组件的结构
// 无返回值可以写null

// class Hello extends React.Component{
//   render(){
//     return(
//       <div>这是我的第一个类组件</div>
//     )
//   }
// }

// class App extends React.Component {
//   state = {
//     count: 0,
//     test: 'a',
//   }
//   jiafa=()=> {
//     this.setState({
//       count: this.state.count + 1
//     })
//   }
//   handle=e=>{
//     this.setState({
//       test:e.target.value
//     })
//   }
//   render() {
//     return (
//       <div>
//         <h1>计数器:{this.state.count}</h1>
//         <button onClick={this.jiafa}>点我</button>
//         <input type="text" value={this.state.test} onChange={this.handle} />
//       </div>
//     )
//   }

// }

class App2 extends React.Component {
  state = {
    list: [
      // { id: 1, name: "jack", content: 'hello' },
      // { id: 2, name: "tom", content: 'werwewewe' },
      // { id: 3, name: "cpdd", content: 'woshiniababa' },

    ],
    content: '',
    zuozhe: '',
  }
  shuru = (e) => {
    console.log(e);
    let { name } = e.target
    this.setState({
      [name]: e.target.value
    })
    // console.log(name,content);
  }
  dianji = () => {
    let { zuozhe, content } = this.state
    if (zuozhe && content !== "") {
      this.setState({
        list: [
          {
            id: Math.random(),
            name:zuozhe,
            content: content
          },
          ...this.state.list
        ],
        zuozhe: '',
        content: '',
        
      })
    }
    return


  }
  xuanran=()=>{
    return(this.state.list.length===0||this.state.list.length===3?(
      <div><p>暂无评论</p></div>
    ):(
      <div>
      <ul>
        {this.state.list.map(item => <li key={item.id}>
          <h1>{item.name}</h1>
          <h2>{item.content}</h2>
        </li>)}
      </ul>
    </div>
    ))
    
  }
  render() {
    return (
      <div>
        <div>
          <input type="text" value={this.state.zuozhe} name="zuozhe" onChange={this.shuru} placeholder="请输入昵称"/>
        </div>
        <div>
          <input type="textarea" value={this.state.content} name="content" onChange={this.shuru} placeholder="请输入评论" />
        </div>
        <button onClick={this.dianji} >发表评论</button>
        {this.xuanran()}
      </div>
    )
  }
}

ReactDom.render(<App2 />, document.getElementById('root'))